import { useState, useImperativeHandle, Ref } from 'react';
import { Image } from 'antd';

type previewParams = { src: string };
export interface ImageViewMethods {
	preview: (e: previewParams) => void;
}

type Props = { innerRef: Ref<ImageViewMethods | undefined> };

const ImageView = (props: Props) => {
	const [visible, setvisible] = useState(false);
	const [src, setsrc] = useState('');

	useImperativeHandle(props.innerRef, () => ({
		preview,
	}));

	const preview = ({ src }: previewParams) => {
		setsrc(src);
		setvisible(true);
	};

	return (
		<Image
			width={200}
			style={{ display: 'none' }}
			src={src}
			preview={{
				visible,
				src,
				onVisibleChange: (value) => {
					setvisible(value);
				},
			}}
		/>
	);
};
export default ImageView;
